<template>
    <div class="update-form" v-loading="loading">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
            <el-row style="text-align: center;">
                <el-col style="display: inline-block;">
                    <el-form-item label="上传" prop="field101">
                        <el-upload class="upload-demo" drag multiple ref="upload" :file-list="field101fileList"
                            :auto-upload="false" :on-change="checkFileList" :on-remove="handleRemove"
                            :action="uploadAction">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <!-- <el-button slot="trigger" size="small" type="primary">选取文件</el-button> -->
                            <div slot="tip" class="el-upload__tip">
                                <p>请上传不超过20MB的文件</p>
                                <el-tag size="small">支持doc / docx / pdf / png / jpg / jpeg格式的文件</el-tag>
                                <p v-show="qCount">还剩{{ qCount }}个文件正在处理</p>
                            </div>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="text-align: center;">
                <el-form-item size="large">
                    <el-button type="primary" @click="submitForm">提交</el-button>
                    <el-button @click="resetForm">清空</el-button>
                </el-form-item>
            </el-row>
        </el-form>
    </div>
</template>
<script>
import { getFile } from '@/api/system/resume.js'
import OSS from 'ali-oss'
import { queueCount } from '../../../api/system/resume'

export default {
    components: {},
    props: [],
    data() {
        return {
            formData: {
                field101: null,
            },
            rules: {},
            field101fileList: [],
            uploadAction: "",
            loading: false,
            client: new OSS({
                region: 'oss-cn-shenzhen',
                accessKeyId: 'LTAI5tPUK1V4LGywGARZFLo1',
                accessKeySecret: 'Kfiw4sipAQ7OlNqQv8yYqhq9riwUdD',
                bucket: 'xianyun-resume1'
            }),
            qCount: 0,
        }
    },
    mounted() {
        queueCount().then(res => {
            this.qCount = res.data
        })
        setInterval(() => {
            console.log('刷新');
            queueCount().then(res => {
                this.qCount = res.data
            })
        }, 10000)
    },
    methods: {
        submitForm() {
            if (this.field101fileList.length > 0) {
                this.loading = true
                this.field101fileList.forEach(el => {
                    this.put(el.name, el.raw)
                })
            } else {
                this.$message.error('至少选择一个文件上传!')
                return
            }
        },
        async put(name, file) {
            try {
                var fileName = `/resume/${new Date().getTime()}-${Math.floor(Math.random() * 100000)}-${name}`;
                let result = await this.client.put(fileName, file);
                this.$message({
                    message: '提交成功，文件解析中...',
                    type: 'success'
                });

                let dataInfo = {
                    url: result.url
                }
                getFile(dataInfo).then(res => {
                    console.log(res);
                }).catch(err => {
                    console.log(err);
                    this.$message.error('简历解析出错，请刷新重传!')
                })

                this.resetForm()
                this.loading = false
            } catch (e) {
                this.$message.error('上传出错，请重试!')
                this.resetForm()
                this.loading = false
            }
        },
        // 清空上传列表
        resetForm() {
            this.$refs.upload.clearFiles()
        },
        // 文件类型判断
        field101BeforeUpload(file) {
            let isRightSize = file.size / 1024 / 1024 < 10
            if (!isRightSize) {
                this.$message.error('文件大小不能超过 10MB!')
            }

            let regex = /\.?(doc|docx|pdf|png|jpg|jpeg)$/
            let isAccept = regex.test(file.name)
            if (!isAccept) {
                this.$message.error('请上传正确格式的文件!')
            }

            return isRightSize && isAccept
        },
        checkFileList(file, fileList) {
            if (this.field101BeforeUpload(file)) {
                this.field101fileList = fileList
            } else {
                // 不符合类型的删除
                this.$refs.upload.handleRemove(file)
            }
        },
        // 在列表里删除错误文件的展示
        handleRemove(file, fileList) {
            this.field101fileList = fileList
        }
    }
}
</script>

<style scoped>
.update-form {
    width: 80vw;
    height: 80vh;
    margin: 10vh auto;
}

.el-upload__tip {
    line-height: 1.2;
}
</style>
  